<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> 马昌进送水后台管理系统</title>
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">

    <!--Bootstrap固定框架-->
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
    <!--图标库-->
    <link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
    <!--核心样式-->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" href="/css/login.css" />

    <!--3D 环形图-->
    <script src="https://code.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://code.hcharts.cn/highcharts/highcharts-3d.js"></script>
    <script src="https://code.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://code.hcharts.cn/plugins/zh_cn.js"></script>
    <!--柱状图-->
    <script src="https://code.hcharts.cn/highcharts/highcharts-more.js"></script>

    <!--css代码-->
    <style>
        /* css 代码  */
        #container1 {
            min-width: 300px;
            max-width: 800px;
            height: 380px;
            margin: 1em auto;
            margin-left: 40%;
        }
    </style>

</head>
<body>

<div id="viewport">

    <!-- Sidebar -->
    <div id="sidebar" th:fragment="sidebar">

        <header>
            <a href="#">昌进送水公司后台管理</a>
        </header>
        <ul class="nav">
            <li>
                <a th:href="@{/cust/listCust}">
                    <i class="zmdi zmdi-view-dashboard"></i> 客户管理
                </a>
            </li>


            <li>
                <a th:href="@{/worker/workerList}">
                    <i class="zmdi zmdi-link"></i> 送水工管理
                </a>
            </li>
            <li>
                <a th:href="@{/history/listHis}">
                    <i class="zmdi zmdi-view-list"></i> 送水历史管理
                </a>
            </li>
            <li>
                <a th:href="@{/salary/searchSalary}">
                    <i class="zmdi zmdi-view-toc"></i> 计算工资
                </a>
            </li>
            <li>
                <a th:href="@{/stat/statWaterDetails}">
                    <i class="zmdi zmdi-view-web"></i> 统计送水数量
                </a>
            </li>
            <li>
                <a th:href="@{/account/pwd}">
                    <i class="zmdi zmdi-view-week"></i> 修改密码
                </a>
            </li>
        </ul>
    </div>

    <!-- Content -->
    <div id="content">
        <nav class="navbar navbar-default" th:fragment="navbar">
            <div class="container-fluid" >
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#"><i class="zmdi zmdi-notifications text-danger"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">当前用户:[[${session.currentUser}]]</a></li>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="container-fluid">

        </div>

    </div>


    <!--人物展示-->
    <!--第一名-->
    <div class="body_count">
        <div class="login_count2">
            <img src="/img/1.png" style="width: 60px; height:80px">
            <div style="margin-left: 80px;margin-top: -70px">
                <h1 style="font-size:24px;color: red">冠军</h1>
                <p id="No1" th:name="workerName"></p>
                <p id="NoCount1" th:name="sendWaterCount"></p>
            </div>
        </div>
    </div>
    <!--第二名-->
    <div class="body_count3">
        <div class="login_count3">
            <img src="/img/2.png" style="width: 60px; height:80px">
            <div style="margin-left: 80px;margin-top: -70px">
                <h1 style="font-size:24px;color: blue">亚军</h1>
                <p id="No2" th:name="workerName"></p>
                <p id="NoCount2" th:name="sendWaterCount"></p>
            </div>
        </div>
    </div>
    <!--第三名-->
    <div class="body_count4">
        <div class="login_count4">
            <img src="/img/3.png" style="width: 60px; height:80px">
            <div style="margin-left: 80px;margin-top: -70px">
                <h1 style="font-size:24px;color: orange">季军</h1>
                <p id="No3" th:name="workerName"></p>
                <p id="NoCount3" th:name="sendWaterCount"></p>
            </div>
        </div>
    </div>

    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="/js/login.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <!--3D 环形图-->
    <div id="container1" style="height: 400px"></div>
    <script>
        // JS 代码
        var workerName = new Array();
        var sendWaterCount = new Array();
        axios({
            method:"get",
            url:"/main/mainMenu"
        }).then(function (resp) {
            for (let i = 0; i < resp.data.length; i++) {
                var respElement = resp.data[i];
                workerName[i] = respElement.workerName;
                sendWaterCount[i] = respElement.sendWaterCount;
            }

            //前三名
            $('#No1').text('姓名：'+workerName[0])
            $('#NoCount1').text('数量：'+sendWaterCount[0])
            $('#No2').text('姓名：'+workerName[1])
            $('#NoCount2').text('数量：'+sendWaterCount[1])
            $('#No3').text('姓名：'+workerName[2])
            $('#NoCount3').text('数量：'+sendWaterCount[2])


            var chart = Highcharts.chart('container1', {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45
                    }
                },
                title: {
                    text: '送水工数量百分比'
                },
                subtitle: {
                    text: '3D环形图'
                },
                plotOptions: {
                    pie: {
                        innerSize: 100,
                        depth: 45
                    }
                },
                series: [{
                    name: '送水数量',
                    data: [
                        [workerName[0],sendWaterCount[0]],
                        [workerName[1],sendWaterCount[1]],
                        [workerName[2],sendWaterCount[2]],
                        [workerName[3],sendWaterCount[3]],
                        [workerName[4],sendWaterCount[4]],
                        [workerName[5],sendWaterCount[5]],
                        [workerName[6],sendWaterCount[6]],
                        [workerName[7],sendWaterCount[7]],
                        [workerName[8],sendWaterCount[8]],
                        [workerName[9],sendWaterCount[9]],
                        [workerName[10],sendWaterCount[10]],
                        [workerName[11],sendWaterCount[11]]
                    ]
                }]
            });
        })




    </script>

    <!--柱状图-->
    <div id="container"></div>
    <div id="wrapper">
        <button id="plain" class="btn btn-success">普通</button>
        <button id="inverted" class="btn btn-danger">反转</button>
        <button id="polar" class="btn btn-warning">极地图</button>
    </div>
    <script>
        // JS 代码
        var workerName = new Array();
        var sendWaterCount = new Array();
        axios({
            method:"get",
            url:"/main/mainMenu"
        }).then(function (resp) {
            for (let i = 0; i < resp.data.length; i++) {
                var respElement = resp.data[i];
                workerName[i] = respElement.workerName;
                sendWaterCount[i] = respElement.sendWaterCount;
            }
        })

        var chart = Highcharts.chart('container', {
            title: {
                text: '送水排行榜'
            },
            subtitle: {
                text: '普通的'
            },
            xAxis: {
                categories: workerName
            },
            series: [{
                type: 'column',
                colorByPoint: true,
                data: sendWaterCount,
                showInLegend: false
            }]
        });
        // 给 wrapper 添加点击事件
        Highcharts.addEvent(document.getElementById('wrapper'), 'click', function(e) {
            var target = e.target,
                button = null;
            if(target.tagName === 'BUTTON') { // 判断点的是否是 button
                button = target.id;
                switch(button) {
                    case 'plain':
                        chart.update({
                            chart: {
                                inverted: false,
                                polar: false
                            },
                            subtitle: {
                                text: '普通的'
                            }
                        });
                        break;
                    case 'inverted':
                        chart.update({
                            chart: {
                                inverted: true,
                                polar: false
                            },
                            subtitle: {
                                text: '反转'
                            }
                        });
                        break;
                    case 'polar':
                        chart.update({
                            chart: {
                                inverted: false,
                                polar: true
                            },
                            subtitle: {
                                text: '极地图'
                            }
                        });
                        break;
                }
            }
        });
    </script>

</div>
